<template>
  <xy-page>
    <div class="channelManage">
      <el-tabs v-model="activeName" @tab-click="selectMenu">
        <el-tab-pane label="直播间" name="first">
          <xy-search>
            <el-form>
              <el-form-item>
                <div class="clearfix">
                  <div class="block fl" style="width:225px">
                    <el-date-picker
                      v-model="form.searchTime"
                      type="daterange"
                      range-separator="-"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                      :picker-options="pickerOptions"
                      @change="changeTime"
                      clearable
                    ></el-date-picker>
                  </div>
                  <el-input
                    class="fl mgl20 w200"
                    v-model="form.channelNum"
                    placeholder="频道号"
                    clearable 
                  ></el-input>
                  <el-input
                    class="fl mgl20 w200"
                    v-model="form.channelName"
                    placeholder="频道名称"
                    clearable
                  ></el-input>
                  <el-select v-model="form.valueType" class="mgl20 w200">
                    <el-option
                      v-for="item in liveStatus"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </div>
              </el-form-item>
            </el-form>

            <div slot="right">
              <el-button type="primary" @click="searchTab">查询</el-button>
              <el-button class="mgl20" @click="clearSerach">重置条件</el-button>
            </div>
          </xy-search>
            <div v-if="!imgList.list.length" class="nullList">当前暂无直播间，选择应用后创建</div>
            <div v-else class="live-imghome">
              <div class="live-imglist" v-for="(item,index) in imgList.list" :key="index" @mouseenter="mouseEnter(index)" @mouseleave="mouseLeave(index)">
                <div>
                  <div :style="'background-image: url(' + item.src + ')'" class="live-img"></div>
                </div>
                <div class="live-type">{{item.type}}</div>
                <div class="mgb10">
                  <div class="mgl20" style="font-weight:bold">{{item.title}}</div>
                  <div class="mgl20">创建时间：{{item.createTime | date}}</div>
                  <div class="mgl20">频道号：{{item.channelId}}</div>
                </div>
                <!-- 蒙层 -->
                <div class="live-men" style="display:none" ref="isShow">
                  <div class="txtC mgt20">
                    <el-input class="w200" v-model="item.url" size="mini" readonly></el-input>
                    <span class="cursor" v-clipboard:copy="item.url" v-clipboard:success="onCopy" v-clipboard:error="onError">复制</span>
                    <span class="cursor" @click="openUrl(index)">打开</span>
                  </div>
                  <div class="qrcode">
                    <div :id="'qrcodea'+index" ref="qrcode"></div>
                  </div>
                  <div class="conpig">
                    <span class="cursor w90" @click="setChannel(item)">
                      <i class="el-icon-setting"></i>设置
                    </span>
                    <span class="cursor w90">
                      <span @click="opendateUrl(item)"><img src="/static/images/statistics.png" style="width:15px;height:15px;"/>统计</span>
                    </span>
                    <span class="cursor w90" @click.stop="delItem(item,index)">
                      <i class="el-icon-delete"></i>删除
                    </span>
                  </div>
                </div>
              </div>
              <div v-show="imgList.total>imgList.size">
                <el-pagination background layout="prev, pager, next" :total="imgList.total" :current-page="imgList.page" :page-size="imgList.size" :hide-on-single-page="true" @current-change="pageChange"></el-pagination>
              </div>
            </div>
        </el-tab-pane>
        <el-tab-pane label="直播监控" name="second">
          <div>
            <xy-search>
              <el-form :model="form" ref="form">
                <el-form-item>
                  <el-input
                    style="width:200px;"
                    class="fl"
                    v-model="form.channelNum"
                    placeholder="频道号"
                    clearable
                  ></el-input>
                  <el-input
                    style="width:200px;"
                    class="fl mgl20"
                    v-model="form.channelName"
                    placeholder="频道名称"
                    clearable
                  ></el-input>
                  <el-select v-model="form.senceType" class="w200 mgl20">
                    <el-option
                      v-for="item in playType"
                      :key="item.playType"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                  <el-select v-model="form.valueType" class="mgl20 w200">
                    <el-option
                      v-for="item in playStatus"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-form>
              <div slot="right">
                <el-button type="primary" @click="searchMonitor">查询</el-button>
                <el-button class="mgl20" @click="clearMonitor">重置条件</el-button>
              </div>
            </xy-search>
            <div>
              <xy-table :tableData="Monitor" :loading="Monitor.isloading" @change="getMonitlist">
                <el-table-column align="center" label="直播截图" min-width="180">
                  <template slot-scope="scope">
                    <img :src="Monitor.list[scope.$index].captureImg" class="screenshot">
                  </template>
                </el-table-column>
                <el-table-column align="center" prop="channelId" label="频道号" min-width="100"></el-table-column>
                <el-table-column align="center" prop="title" label="频道名称" min-width="150"></el-table-column>
                <el-table-column align="center" label="直播场景" min-width="150">
                  <template slot-scope="scope">{{Monitor.list[scope.$index].scene }}</template>
                </el-table-column>
                <el-table-column align="center" label="开始推流时间" min-width="150">
                  <template slot-scope="scope">{{scope.row.createTime | date}}</template>
                </el-table-column>
                <el-table-column align="center" prop="type" label="状态" min-width="100"></el-table-column>
                <el-table-column align="center" label="操作" min-width="250">
                  <template slot-scope="scope">
                    <el-button @click="playVideo(scope.row)" type="text" size="small" :disabled="scope.row.status != 'LIVE'">预览</el-button>
                    <el-button @click="prohiBit(scope.row)" type="text" size="small" :disabled="scope.row.status != 'LIVE'">禁流</el-button>
                    <el-button @click="recoVery(scope.row)" type="text" size="small">恢复流</el-button>
                  </template>
                </el-table-column>
              </xy-table>
                <el-dialog v-if="dialogPlay" title="预览" :visible.sync="dialogPlay" width="700px">
                  <div class="mgt20" >
                    <div id='player' style="width:600px;height:400px;border:1px solid #ccc;margin:0 auto;"></div>
                  </div>
                  <span slot="footer" class="dialog-footer">
                    <div style="text-align:center;margin-top:20px;padding-bottom:20px;">
                      <el-button type="primary" @click="dialogPlay = false">关闭预览</el-button>
                    </div>
                  </span>
                </el-dialog>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </xy-page>
</template>

<script>
export default {
  data() {
    return {
      pickerOptions:{
        disabledDate(date){
          return date.getTime()>=Date.now()
        }
      },
      activeName: 'first',
      form: {
        searchTime: '', //搜索时间
        channelNum: '', //频道号
        channelName: '', //频道名称
        valueType: '', //直播状态
        senceType: ''
      },
      liveStatus: [
        { value: '', label: '所有状态' },
        { value: 'end', label: '直播结束' },
        { value: 'live', label: '直播中' },
        { value: 'playback', label: '回放中' },
        { value: 'waiting', label: '等待直播' }
      ], // 状态列表
      playStatus:[
        { value: '', label: '所有状态' },
        { value: 'end', label: '已结束' },
        { value: 'live', label: '直播中' },
      ],
      imgList: {
        isloading: false,
        total: 0,
        page: 1,
        size: 10,
        list: []
      },
      Monitor:{
        isloading: false,
        total: 0,
        page: 1,
        size: 10,
        list: []
      },
      appStatus: '',
      playType: [{value:'',label:'直播场景'},{ value: 'alone', label: '视频' }],
      isSave: false, // loading
      startDate: '',
      endDate: '',
      appstatuValue: '',
      dialogPlay:false,
      videoUrl:''
    }
  },
  methods: {
    changeTime(){//选择的时间进行校验
      if(this.form.searchTime!="" && this.form.searchTime!=null){
        let pickermaxDate=this.form.searchTime[1].getTime() //当前最大时间戳
        pickermaxDate = pickermaxDate -30*24*60*60*1000
        if(this.form.searchTime[0]<pickermaxDate){
          this.$message.error('日期选择范围最大不能超过30天')
          this.form.searchTime = ''
          return
        }
        this.startDate =this.$utils.formatTime(this.form.searchTime[0])
        this.endDate=this.$utils.formatTime(this.form.searchTime[1])
      }else{
        this.startDate=''
        this.endDate=''
      }
    },
    opendateUrl(item){//跳转到统计页面
      this.$toPage('/statistics/pfManaBcRoom')
      sessionStorage.setItem('dataChannelId',item.channelId)
    },
    playVideo(item){//预览
      this.dialogPlay = true
      this.$nextTick(()=>{
        polyvObject('#player').livePlayer({
          wrap: "#player",
          width:'600',
          height:'400',
          uid:item.userId,
          vid:item.channelId,
          forceH5:true,
        })
      })
    },
    prohiBit(item){//禁止流
      this.$confirm('禁流后观众看不到视频内容，确认禁流?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$postStream('/admin/instance/ccb/polyv/channel/cutoff.do',{
          data:{
            appId: item.appId,
            channelId: item.channelId
          },
          success:res=>{
            if(res.success){
              this.$message.success('禁流成功')
              setTimeout(()=>{
                this.getMonitlist()
              }, 2000)
            }else{
              this.$message.error('禁流失败')
            }
          }
        })
      }).catch(() => {      
      })
    },
    recoVery(item){//恢复流
      this.$confirm('恢复流后观众看到视频内容，确认恢复流?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$postStream('/admin/instance/ccb/polyv/channel/resume.do',{
          data:{
            appId: item.appId,
            channelId: item.channelId
          },
          success:res=>{
            if(res.success){
              this.$message.success('恢复流成功')
              setTimeout(()=>{
                this.getMonitlist()
              }, 2000)
            }else{
              this.$message.error('恢复流失败')
            }
          }
        })
      }).catch(() => {
      })
    },
    pageChange(index){
      this.getList(index)
    },
    onCopy(){//复制成功提示
      this.$message.success('复制成功!')
    },
    onError(){
      this.$message.error('复制失败!')
    },
    qrCode(index) { // 二维码
      this.$nextTick(()=>{
        const qrCode=document.getElementById('qrcodea' + index)
        qrCode.innerHTML = ""
        new QRCode(qrCode, {
          width: 80,//设置宽高  
          height: 80,
          text: this.imgList.list[index].url
        })
      })
    },
    clearSerach() { // 清除查询记录
      this.form = {
        searchTime: '',
        channelNum: '',
        channelName: '',
        valueType: '',
        senceType:''
      }
      this.startDate = ''
      this.endDate= ''
      this.getList(1)
    },
    clearMonitor() { // 清除查询记录
      this.form = {
        searchTime: '',
        channelNum: '',
        channelName: '',
        valueType: '',
        senceType:''
      }
      this.startDate = ''
      this.endDate= ''
      this.getMonitlist(1)
    },
    setChannel(item) {// 查看详情
      this.$toPage('/broadcast/livechannel', { channelId: item.channelId })
      sessionStorage.setItem('appId', item.appId)
      sessionStorage.setItem('channelId', parseInt(item.channelId))
    },
    searchTab() {//查询
      this.changeTime()
      this.getList()
    },
    searchMonitor(){//监控查询
      this.getMonitlist()
    },
    mouseEnter(index) { //鼠标移入
      this.$refs.isShow[index].style.display = 'block'
    },
    mouseLeave(index) { //鼠标移出
      this.$refs.isShow[index].style.display = 'none'
    },
    openUrl(index) {
      this.$utils.linkTo(this.imgList.list[index].url)
    },
    delItem(item, index) {// 删除数据
      this.$confirm('此操作将永久删除该频道, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$postStream("/admin/instance/ccb/polyv/channel/delete.do", {
          data: {
            appId: this.imgList.list[index].appId,
            channelId: item.channelId
          },
          success: (res) => {
            if (res.success) {
              this.$message.success('删除成功!')
              this.getMonitlist()
              this.getList()
            } else {
              this.$message.error('删除失败!')
            }
          }
        })
      })
    },
    getList(page) { // 获取列表
      this.$postStream("/admin/instance/ccb/polyv/channel/list.do", {
        data: {
          status: this.form.valueType || '',
          appId: this.appstatuValue || 'ALL',
          channelIds: this.form.channelNum || '',
          channelName: this.form.channelName || '',
          endDate: this.endDate || '',
          page: page||this.imgList.page,
          pageSize: this.imgList.size,
          startDate: this.startDate || '',
        },
        success: res => {
          if (res.success) {
            this.imgList.total = res.object.totalItems
             if(res.object.channels==''){
              this.imgList.list = []
              return
            }
            this.imgList.list=res.object.channels.map(element=>{
              return{
                src: element.coverImage || '/static/images/channel1.jpg',
                type: element.statusDiscription||'',
                title: element.name||'',
                createTime: element.createdTime||'',
                url: element.url||'',
                code: element.logoImage||'',
                scene: this.sceneType(element.scene)||'',
                channelId: element.channelId||0,
                userId: element.userId||'',
                categoryId: element.categoryId||'',
                appId: element.appId||''
              }
            })
          }
        }
      })
    },
    getMonitlist(page){// 获取直播监控列表
      this.Monitor.isloading = true
      this.$postStream('/admin/instance/ccb/polyv/channel/listMonitor.do',{
        data:{
          appId: this.appstatuValue || 'ALL',
          channelIds: this.form.channelNum || "",
          channelName: this.form.channelName || "",
          page: page||this.Monitor.page,
          pageSize: this.Monitor.size,
          scene: this.form.senceType || "",
          status: this.form.valueType || "",
        },
        success:res=>{
          if(res.success){
            this.Monitor.total = res.object.totalItems
            this.Monitor.list = res.object.contents.map(element=>{
              return {
                appId:element.appId,
                captureImg:element.captureImg,
                channelId:element.channelId,
                title:element.channelName,
                scene:this.sceneType(element.scene),
                createTime:element.startTime,
                type:this.statusType(element.status),
                status: element.status,
                userId:element.userId
              }
            })
          }
        },
        complete: ()=> {
          this.Monitor.isloading = false
        }      
      })
    },
    selectMenu(tab){//切换
      if(tab.name=='second'){
        this.clearSerach()
        this.getMonitlist(1)
      }else if(tab.name == 'first'){
        this.clearSerach()
        this.getList(1)
      }
    }
  },
  mounted() {
    this.$root.eventHandle.$emit("UPDATE_MENU")
    this.appstatuValue = sessionStorage.getItem('curAccountAppId') || ''
    this.getList()
  },
  updated(){
    for (let i = 0; i < this.imgList.list.length; i++) {
      this.qrCode(i)
    }
  }
}
</script>

<style lang="scss" scoped>
.channelManage {
  .live-imghome {
    position: relative;
    .live-imglist {
      display: inline-block;
      position: relative;
      width: 280px;
      margin: 0 5px 10px 5px;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
      .live-type {
        position: absolute;
        top: 25px;
        left: 25px;
        padding: 5px 10px;
        font-size: 12px;
        border-radius: 5px;
        background: rgba(0, 0, 0, 0.4);
        color: #fff;
      }
      .live-img {
        width: 250px;
        height: 140px;
        margin: 15px 15px 5px;
        position: relative;
        background-size: 100%;
        background-repeat: no-repeat;
        background-position: center center;
      }
      .channel-name{
        font-weight: bold;
        margin: 0 20px;
        width: 240px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .live-men:hover {
        z-index: 30;
        background: rgba(0, 0, 0, 0.6);
      }
      .live-men {
        position: absolute;
        top: 0;
        padding-bottom: 3px;
        width: 280px;
        color: #fff;
        .qrcode {
          position: relative;
          display: block;
          height: 90px;
          width: 90px;
          background: #fff;
          border: 5px solid;
          margin: 35px auto;
          text-align: center;
        }
        .conpig {
          position: relative;
          text-align: center;
        }
      }
    }
  }

  .dilag-mg {
    margin: 0 110px;
  }
  .screenshot {
    width: 80px;
    height: 40px;
    margin: 10px auto;
    border: 1px solid #ccc;
  }
}
</style>

